<script setup lang="ts">
import { get } from 'node_modules/axios/index.cjs';
import { computed, onMounted, ref, watch } from 'vue';


// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}
const listData=ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
],) 
// 水果列表
let fruitList = listData
// 取数据
if ( JSON.parse(localStorage.getItem('newList') as string)!==null&&localStorage.getItem('newList')!=='[]') {
     fruitList= ref<Fruit[]>(JSON.parse(localStorage.getItem('newList') as string))
}
// 总计选中的总价 num * price
const totalPrice = computed(() => {
  return fruitList.value.reduce((sum, item) => {
    if (item.isChecked) {
      return sum + item.num * item.price
    } else {
      return sum
    }
  }, 0)
})

// 删除的逻辑
    const del = (id:number) => {
    fruitList.value=fruitList.value.filter(item=>item.id!==id)
    }
    // 添加的逻辑
      const addNum = (id:number) => {
        fruitList.value = fruitList.value.filter((item => {
          if (item.id === id) {          
              return  item.num++
          } 
          else {
        return fruitList.value
       }
    }))
      }
      // 减的逻辑
const delNum = (id: number) => {
  // fruitList.value = fruitList.value.filter((item) => {
  //     if (item.id===id) {
  //       if (item.num<=1) {
  //           return  window.alert('商品个数不能为负数哦')
  //       }
  //       else {
  //          return item.num--
  //       }
  //     }
  //     else {
  //        return fruitList.value
  //     }
  //   })
  const numbers = fruitList.value.find(item => item.id === id)
    if (numbers) {
            numbers.num--
    }
  }

//  全选和反选
const isAll = computed({

  get(){
    return  fruitList.value.every(item=>item.isChecked)
  },
  
   set (value) {
       fruitList.value.forEach(item=>item.isChecked=value)
  }
  
  
})
// 计算总数
// 统计选中的总数 reduce
const totalNumber = computed(() => {
  return fruitList.value.reduce((sum, item) => {
    if (item.isChecked) {
      // 选中 → 需要累加
      return sum + item.num
    } else {
      // 没选中 → 不需要累加
      return sum
    }
  }, 0)
})

// 持久化存储到本地
watch(() => fruitList, (newData) => {
     localStorage.setItem('newList',JSON.stringify(newData.value))
}, { deep: true })


</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length>0"  class="main" >
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr" >
            <div class="th">点选</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">操作</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody"  >
          <div class="tr active" v-for="item in fruitList" :key="item.id"  :class="{active:item.isChecked}">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="delNum(item.id)"  :disabled="item.num<=1"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="addNum(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.num*item.price }}</div>
            <div class="td" @click="del(item.id)"><button>删除</button></div>
          </div>

        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all" >
          <input type="checkbox" v-model="isAll"/>
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalNumber }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div  v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>